Vue.component('v-circle', {
    props: {
        id: {
            type: Number,
        },
        bindmap: {
            type: Array,
            default:[[0,-1],[0,-1],[0,-1],[0,-1]],
        },
        cx: {
            type: Number,
            default:500,
        },
        cy: {
            type: Number,
            default:500,
        },
        r: {
            type: Number,
            default:40,
        },
        fill: {
            type: String,
            default:'#a6d49e'
        },
        freelink: {
            type: Boolean,
            default:false,
        }
    },
    data: function () {
        return {
            hold: false,
            holdStart:[0,0],
            ofX: 0,
            ofY: 0,
            overEleId: 0,
            cursor:'pointer',//not-allowed //move //crosshair
        }
    },
    mounted: function () {
        App.eventBus.$on("mouseUp", function () {
            this.hold = false;
            this.cursor = 'pointer';
        }.bind(this))

        App.eventBus.$on("eleMouseover", function (payload) {
            this.overEleId = payload.id;
        }.bind(this))

        App.eventBus.$on("onCanvasMove", function (e) {
            if (this.hold) {
                var _x = e.offsetX - this.ofX;
                var _y = e.offsetY - this.ofY;
                this.cursor = 'move';
                /* 画布范围内限制移动 */
                this.changeEle({
                    id: this.id,
                    cx: _x>(App.canvasWidth-this.r)?App.canvasWidth-this.r:(_x<this.r?this.r:_x),
                    cy: _y>(App.canvasHeight-this.r)?App.canvasHeight-this.r:(_y<this.r?this.r:_y),
                });
            }
        }.bind(this))
    },
    methods: {
        holdOn: function (e) {
            this.hold = true;
            this.holdStart = [e.offsetX, e.offsetY];
            this.ofX = e.offsetX - this.cx;
            this.ofY = e.offsetY - this.cy;
        },
        changeEle: function (payload) {
            App.eventBus.$emit("changeEle",payload)
        },
        mkLine: function (x1,y1,x2,y2) {
            return 'M' + x1 + ' ' + y1 + ' L ' + x2 + ' ' + y2;
        },
        /* 元素点击 */
        addClick: function (e) {
            /****1上****
            4左******2右
            ****3下****/
            /* 区分拖动点击与新增区域点击 偏移像素大于3 */
            var dir  = this.calcFocusIndex(e);
            if(dir>0){
                /* 已连接不再绑定 */
                if (this.bindmap[dir-1][0]>0) {
                    return false;
                }
                if (!this.freelink&&Math.abs(this.holdStart[0] - e.offsetX) < 3 && Math.abs(this.holdStart[1] - e.offsetY) < 3) {
                    /* 创建关联元素 */
                    App.eventBus.$emit("addElement",{scope:this,dir:dir})
                }
                /* freelink直接关联元素 */
                else if(this.freelink){
                    App.eventBus.$emit("linkElement", {scope:this,dir:dir})
                }
            }
        },
        /* 计算触发区域index 1\2\3\4 */
        calcFocusIndex: function(e){
            var clickX = e.offsetX - this.cx;
            var clickY = e.offsetY - this.cy;
            var deg = Math.atan(clickY / clickX) * 180 / Math.PI;
            var dir = 0;

            /* 通过与原点角度计算区分点击区域 */
            if (clickY<0 && (deg>45 || deg<-45)) {
                dir = 1;
            }
            else if (clickX > 0 && deg < 45 && deg > -45) {
                dir = 2;
            }
            else if (clickY > 0 && (deg < -45 || deg > 45)) {
                dir = 3;
            }
            else if (clickX < 0 && deg > -45 && deg < 45) {
                dir = 4;
            }
            return dir;
        },
        mouseOnUp: function () {
            this.hold=false;
        },
         /* 元素mouseover */
        eleMouseOver:function(id) {
            App.eventBus.$emit('eleMouseover',{id:id})
        },
        /* 元素mouseleave */
        eleMouseLeave: function (id) {
            this.cursor = 'pointer';
            App.eventBus.$emit('eleMouseover',{id:0})
        },
        /* 元素mousemove */
        eleMouseMove: function(e){
            var dir = this.calcFocusIndex(e);
            if(dir>0){
                if(this.bindmap[dir-1][0]>0){
                    this.cursor = 'not-allowed';
                }
                else{
                    /* 正常状态 */
                    this.cursor = 'crosshair';
                }
            }
        },
        /* 元素点击删除 */
        eleClickDel:function(){
            App.eventBus.$emit("elementDelete",this.id);
        },
        /* 元素有效区点击（shift） */
        eleMouseDown:function(e){
            var dir  = this.calcFocusIndex(e);
            if(dir>0){
                    /* 已连接不再响应 */
                if (this.bindmap[dir-1][0]>0) {
                    return false;
                }
                App.eventBus.$emit("freedomLinkStart",{scope:this,dir:dir})
            }
        },
        /* 元素点击编辑 */
        eleClickEdit: function () {
            App.eventBus.$emit("elementEdit", this)
        }
    },
    template: '<g :style="{cursor:cursor}" @mousedown.exact="holdOn" @mouseup="mouseOnUp" @mouseenter="eleMouseOver(id)"  @mouseleave="eleMouseLeave(id)" >\
    <circle @mouseup="addClick" @mousemove="eleMouseMove" @mousedown.shift="eleMouseDown" :cx="cx" :cy="cy" :r="r" :fill="fill"></circle>\
    <g v-show="overEleId==id" :transform="\'rotate(45,\'+cx+\',\'+cy+\')\'">\
    <path :d="mkLine(cx-r,cy,cx+r,cy)" fill="transparent" stroke="#a5c79f" stroke-width="1"/>\
    <path :d="mkLine(cx,cy-r,cx,cy+r)" fill="transparent" stroke="#a5c79f" stroke-width="1"/>\
    </g>\
    <g @click="eleClickEdit" style="cursor:pointer;" v-show="overEleId==id&&!freelink">\
        <rect :x="cx+r/2" :y="cy-r" :rx="r/3" :ry="r/3" :width="4*r/3" :height="2*r/3" fill="#c8eaff"/>\
        <text :x="cx+r/2+2*r/3" :y="cy-r+r/3+r/8" :font-size="r/3" text-anchor="middle" fill="#308ec7">编辑</text>\
    </g>\
    <g @click="eleClickDel" style="cursor:pointer;" v-show="overEleId==id&&!freelink">\
        <rect :x="cx-4*r/3-r/2" :y="cy-r" :rx="r/3" :ry="r/3" :width="4*r/3" :height="2*r/3" fill="#ffd9d9"/>\
        <text :x="cx-r/2-2*r/3" :y="cy-r+r/3+r/8" :font-size="r/3" text-anchor="middle" fill="#ff8484">删除</text>\
    </g>\
            </g>',
})